<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/message.css">

<style>
/* 非组件样式 */
.btn{
	margin-right:20px;
}
.p40{
	padding:40px;
}
.mt20{
	margin-top:20px;
}
</style>

</head>
<body>
	
<div class="p40">
	<p>点击调用提示</p>
	<button class="btn btn-success">成功提示</button>
	<button class="btn btn-danger">失败提示</button>
	<button class="btn btn-warning">警告提示</button>
	<button class="btn btn-info">信息提醒</button>
</div>
<div class="p40">

<p>调用方式：</p>
<pre>
$('.btn-success').on('click',function(){
    $.message('成功');
})
$('.btn-danger').on('click',function(){
    $.message({
        message:'失败提示',
        type:'error'
    });
})
$('.btn-warning').on('click',function(){
    $.message({
        message:'警告提示',
        type:'warning'
    });
})
$('.btn-info').on('click',function(){
    $.message({
        message:'信息提醒',
        type:'info'
    });
})
 </pre>

            <p class="mt20">参数详解：</p>
<pre>
message:' 操作成功',    //提示信息
time:'2000',           //显示时间（默认：2s）
type:'success',        //显示类型，包括4种：success.error,info,warning
showClose:false,       //显示关闭按钮（默认：否）
autoClose:true,        //是否自动关闭（默认：是）
</pre>
        </div>

<script src="js/jquery.min.js"></script>
<script src="js/message.js"></script>
<script>
$(function(){
	$('.btn-success').on('click',function(){
		$.message('成功');
	})
	$('.btn-danger').on('click',function(){
		$.message({
			message:'失败提示',
			type:'error'
		});
	})
	$('.btn-warning').on('click',function(){
		$.message({
			message:'警告提示',
			type:'warning'
		});
	})
	$('.btn-info').on('click',function(){
		$.message({
			message:'信息提醒',
			type:'info'
		});
	})
	
})
</script>


</body>
</html>
